<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <base th:href="@{/}">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>忘记密码</title>

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/bootstrap.min.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/fonts/line-icons.css}">

    <link rel="stylesheet" th:href="@{/assets/plugins/morris/morris.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/main.css}">

    <link rel="stylesheet" type="text/css" th:href="@{/assets/css/responsive.css}">

    <link rel="stylesheet" th:href="@{https://use.fontawesome.com/releases/v5.5.0/css/all.css}" crossorigin="anonymous">

    <script th:src="@{/assets/js/jquery-min.js}"></script>
    <script th:src="@{/assets/js/jquery-min.js}"></script>
    <script>
        $(function () {
            $("#phoneTips").hide();
            $("#answerTips").hide();
        });

        function check(){
            $("#phoneTips").hide();
            $("#answerTips").hide();

            var phone =$("#phone").val();
            var answer =$("#answer").val();
            var options=$("#select option:selected"); //获取选中的项
            var problem=options.val();
            var data = {"phone":phone,"problem":problem,"answer":answer};

            if (phone!=""){
                if(!(/^1[345789]\d{9}$/.test(phone))){
                    $("#phoneTips").text("手机号码格式有误，请重新填写");
                    $("#phoneTips").show();
                }else {
                    if (answer!=""){
                        $.ajax({
                            url:"/front/user/verification",
                            dataType:"json",
                            type:"post",
                            data:data,
                            success:function(data){
                                if (data.isSuccess=="true"){
                                    window.open("/front/user/updatePasswordByUserId?id="+data.id, "_self");
                                }else {
                                    if(data.seat == "用户位置"){
                                        $("#phoneTips").html(data.message);
                                        $("#phoneTips").show();
                                    }else{
                                        $("#answerTips").html(data.message);
                                        $("#answerTips").show();
                                    }

                                }
                            },
                            error:function(){
                                $("#answerTips").text("验证失败");
                                $("#answerTips").show();
                            }
                        });
                    }else {
                        $("#answerTips").text("答案不能为空");
                        $("#answerTips").show();
                    }
                }
            }else {
                $("#phoneTips").text("手机号不能为空");
                $("#phoneTips").show();
            }
        }

    </script>

</head>
<body>
<div class="app header-default side-nav-dark">
    <div class="layout">
        <div class="header navbar">
            <div class="header-container">
                <ul class="nav-left">
                    <li>
                        <a href="javascript:history.back(-1);">
                            <i class="lni-chevron-left" style="border: transparent;"></i>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="page-container" style="padding: 64px 0 0 0!important;">
            <div class="main-content" style="padding-top: 15px!important;">
                <div class="container-fluid">
                    <div class="card">
                        <div class="card-header border-bottom">
                            <h4 class="card-title">安全问题验证</h4>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-10 col-md-12 col-xs-12">
<!--                                    <form action="/front/user/sureUpdate" role="form" id="form-validation" novalidate="novalidate" method="post" >-->
                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label control-label">
                                                <span>手机号码</span>
                                                <p style="color: #dc3545;display: inline-block!important;font-size: 0.68rem;padding-left: 10px;margin-bottom: 0px;" id="phoneTips"></p>
                                            </label>
                                            <div class="col-sm-10">
                                                <div>
                                                    <input type="text" class="form-control" name="phone" placeholder="手机号码" id="phone">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label control-label">安全问题</label>
                                            <div class="col-sm-10">
                                                <select id="select" class="form-control custom-select chosen" required style="color: #232323;">
                                                    <option th:each="problem,problemStat : ${problemList}" th:selected="${problem.problem== '0'}"  th:value="${problem.problem}" th:text="${problem.problemInfo}"></option>
                                                </select>
                                            </div>
                                        </div>

                                        <div class="form-group row">
                                            <label class="col-sm-2 col-form-label control-label">
                                                <span>安全问题答案</span>
                                                <p style="color: #dc3545;display: inline-block!important;font-size: 0.68rem;padding-left: 10px;margin-bottom: 0px;" id="answerTips"></p>
                                            </label>
                                            <div class="col-sm-10">
                                                <div>
                                                    <input type="text" class="form-control" name="answer" placeholder="安全问题答案" required="" aria-required="true" id="answer">
                                                </div>
                                            </div>
                                        </div>

                                        <button class="btn btn-outline-success" onclick="check()">
                                            <span>确认</span>
                                        </button>
<!--                                    </form>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/assets/js/popper.min.js}"></script>
<script th:src="@{/assets/js/bootstrap.min.js}"></script>
<script th:src="@{/assets/js/jquery.app.js}"></script>
<script th:src="@{/assets/js/main.js}"></script>

<script th:src="@{/assets/plugins/morris/morris.min.js}"></script>
<script th:src="@{/assets/plugins/raphael/raphael-min.js}"></script>
<!--<script th:src="@{/assets/js/dashborad1.js}"></script>-->

<script th:src="@{https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js}" crossorigin="anonymous"></script>

</body>

</html>